<style lang="stylus" scoped>
.classift-item, display flex, .classift-item > a {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.active {
  border-left: 2px solid;
  background: rgba(243, 243, 243, 1);
  color: #333 !important;
}

.calssify-con {
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 0px;
  bottom: 0;

  .calssify-left {
    flex: 0 0 2.9rem;
    width: 4rem;
    height: 100%;
    background: #fff;
    margin-bottom: 1.51rem;
    font-size: 0.35rem;

    li {
      height: 1.3rem;
      line-height: 1.3rem;
      text-align: center;
      color: rgba(153, 153, 153, 1);
    }
  }

  .calssify-rigth {
    height: 100%;
    background: white;
    margin-bottom: 1.51rem;
    overflow: auto;
    padding-bottom: 3rem;
  }
}

.calssify-left-ul {
  li {
    overflow: hidden;
    padding-bottom: 0.4rem;
  }
}

.item-pic {
  width: 30%;
  float: left;
  overflow: hidden;
}

.item-wrap {
  float: left;
  width: 67%;
  margin-left: 2%;
  text-align: left;
  padding-left: 15px;

  .item-title {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.3rem;
  }

  .item-sale {
    margin-left: 0.2rem;
  }

  .info em {
    color: #ff555f;
    font-style: normal;
  }
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fle-wrap {
  width: 10px;
}

.ul-box {
  width: 100%;
  padding-top: 10px;
}

.pro-item {
  width: 33.3%;
  height: auto;
  float: left;
  font-size: 11px;
  font-weight: bold;

  img {
    width: 70px;
    height: 70px;
    margin-bottom: 5px;
  }

  span {
    width: 100%;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
  }
}
</style>

<template>
  <div >
    <div class="calssify-con flex-display">
      <div class="calssify-left" ref="wrapper">
        <ul class="calssify-left-ul" id="uuu">
          <li
            v-for="(item,index) in navData"
            :key="index"
            @click="fnSelectClassify(item,index)"
            :class="{active:classifyIndex == index}"
          >{{item.class_name}}</li>
        </ul>
      </div>
      <div class="fle-wrap"></div>
      <div class="calssify-rigth flex-display flex-num-one" ref="wrapper2">
        <ul class="calssify-left-ul animated fadeInRight ul-box" v-if="productList.length">
          <li 
            @click="fnOpenNewProList(item.id)"
            class="pro-item flex-center-pack flex-display flex-center-align flex-display-column" 
            v-for="(item, index) in productList" 
            :key="index">
            <img :src="item.photo"/>
            <span class="text-overflow-1">{{item.class_name}}</span>
          </li>
        </ul>
      </div>
    </div>
    <ComFooter/>
  </div>
</template>

<script>
import ComHeader from "@/common/ComHeader";
import ComFooter from "@/common/ComFooter";
import Loading from "@/base/loading/loading";
import { Indicator } from "mint-ui";
import api from "@/fetch/api";
export default {
  data() {
    return {
      classifyIndex: 0,
      navData: [],
      isHasMore: false,
      class_id: "", // 分类id 默认1
      productList: [] //产品数据
    };
  },
  components: {
    ComFooter,
    ComHeader,
    Loading,
    Indicator
  },
  created() {
    document.title = '我的分类'
    // 获取一级类别数据
    this.getgoodsclass();
  },
  methods: {
    /**
     * @author yang
     * @desc 跳转到商品列表页
     * @param _id 分类id
     */
    fnOpenNewProList(_id) {
      this.$router.push({
        path: 'NewProList',
        query: {
          classId: _id
        }
      })
    },
    /**
     * @author yang
     * @desc 获取分类数据
     */
    getgoodsclass() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      api.getgoodsclass().catch(result => {
        Indicator.close()
        if (result.status == 200 && result.data.code === 0) {
          this.navData = result.data.data;
          this.class_id = result.data.data[0].id;
          // 获取一级下的二级分类
          this.fnGetSecondData();
        }
      }).then(res => {
        Indicator.close()
      });
    },

    /**
     * @author yang
     * @desc 获取二级分类数据
     */
    fnGetSecondData() {
      api.getgoodsclass({class_id: this.class_id}).catch(result => {
        console.log(result);
        console.log("数据===");
        Indicator.close();
        if (result.status == 200 && result.data.code === 0) {
          this.productList = result.data.data;
          console.warn(this.productList);
          
        }
      });
    },
    /**
     * @author yang
     * @desc 选择选中的分类类型
     * @param {Object} _item 当前分类对象
     */
    fnSelectClassify(_item, _index) {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      this.class_id = _item.id;
      this.classifyIndex = _index
      this.fnGetSecondData()
    },
    
  }
};
</script>



